<template>
  <div class="wrap">
    <div class="productionItem">
      <div class="proIntroWrap" v-for="(item, index) in jumpDataList" :key="index">
        <div class="proIntroLeft">
          <img :src="$imgUrl + item.listImgUrl" alt="" class="proPoster" />
        </div>
        <div class="proIntroRight">
          <div class="proIntro">
            {{ item.goodsName }}
          </div>
          <div class="workTime">
            <div class="timeLeft">{{ item.specsName }} ×{{ item.payNum }}</div>
            <div class="saleRight"><em class="moneyLogo">￥</em>{{ item.payPrice }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="productionItem">
      <div class="infoList">
        <div class="lineWrap" @click="show = true">
          <div class="leftLine">退款原因</div>
          <div class="rightLine reason">
            {{ reasonText || "请选择退款原因" }}
            <img src="@/assets/rightGreyArrow.png" alt="" class="rightArrow" />
          </div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">实付金额</div>
          <div class="rightLine">¥{{ totalPayPrice }}</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">满减抵扣</div>
          <div class="rightLine">¥{{ disPrice || 0 }}</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">退款金额</div>
          <div class="rightLine">
            <input type="" name="" value="" placeholder="请输入金额" class="inputMoney" v-model="inputMoney"/>
            <em>最多{{mostBackMoney}}元</em>
          </div>
        </div>
        <div class="notes">注：使用过满减优惠券的商品退款时，会扣除相应满减优惠金额</div>
      </div>
      <div class="textArea">
        <textarea
          rows=""
          cols=""
          placeholder="请输入备注(100字)"
          maxlength="100"
          v-model="inputNotes"
        ></textarea>
      </div>
      <div class="uploadImg">
        <van-uploader v-model="fileList" :after-read="afterRead" :max-count="3" />
      </div>
    </div>
    <div class="mask">
      <van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
        <van-checkbox-group v-model="result">
          <van-cell-group>
            <van-cell class="reasonTitle">退款原因</van-cell>
            <van-cell
              v-for="(item, index) in list"
              clickable
              :key="item"
              :title="`${item}`"
              @click="toggle(index)"
            >
              <template #right-icon>
                <van-checkbox :name="item" ref="checkboxes" />
              </template>
            </van-cell>
            <van-cell class="reasonTitle reasonBtn" @click="sureChooseReason"
              >确定</van-cell
            >
          </van-cell-group>
        </van-checkbox-group>
      </van-popup>
    </div>
    <div class="submit2" @click="createRefundOrder">提交</div>
  </div>
</template>

<script>
import { Field, Uploader, Popup, Checkbox, CheckboxGroup, Cell, CellGroup } from "vant";
import axios from "axios"; // 引入axios
import { apiGetAppRefundReasonList, apiRefundcreateRefundOrder } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      jumpDataList: this.$route.query.jumpDataList, //售后商品列表
      shopId: this.$route.query.shopId, //店铺id
      menuId: this.$route.query.menuId, //订单id
      disPrice: this.$route.query.disPrice?this.$route.query.disPrice:0, //减满优惠金额
      totalPayPrice: this.$route.query.totalPayPrice, //实付总金额
      show: false,
      resReasonList: [], //退款理由原始数据
      list: [], //退款理由picker
      result: [],
      value: "",
      fileList: [],
      reqimageUrl: "", //凭证
      mostBackMoney: "", //最多退款
      inputMoney: "", //输入退款金额
      reasonText: "", //退款原因文字展示
      inputNotes: "", //备注
    };
  },
  mounted() {
    console.log("jumpDataList", this.jumpDataList);
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getAppRefundReasonList();
    var menuPay = 0; //退款订单付的钱总和
    this.jumpDataList.map((item) => {
      menuPay += item.payPrice;
    });
    this.mostBackMoney = menuPay-menuPay/this.totalPayPrice*this.disPrice
  },
  methods: {
    //上传图片：
    afterRead(file) {},
    upLoadImg(dataItem) {
      var that = this;
      var serverSrc = this.$imgUrl;
      var form_data = new FormData();
      form_data.append("file", dataItem);
      axios({
        url: serverSrc + "/common/upload",
        data: form_data,
        contentType: false,
        processData: false,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
        that.reqimageUrl = that.reqimageUrl + res.data.data.fileName + ",";
      });
    },
    //获取退款原因列表
    getAppRefundReasonList() {
      apiGetAppRefundReasonList({}).then((res) => {
        this.resReasonList = res.data;
        this.resReasonList.map((item) => {
          this.list.push(item.refuseReason);
        });
        console.log("list", this.list);
      });
    },
    //确定选择原因：
    sureChooseReason() {
      this.reasonText = this.result.toString();
      this.show = false;
    },
    //创建退款订单
    createRefundOrder() {
      console.log(this.fileList.length,this.reasonText,this.inputMoney)
      if(this.fileList.length==0||this.reasonText==''||this.inputMoney==''){
        this.$toast.fail('请填写完整退款申请信息')
        return
      }
      if(this.inputMoney*1<=0){
         this.$toast.fail('退款金额不能小于等于0')
         return
      }
       if(this.inputMoney*1>this.mostBackMoney){
         this.$toast.fail('退款金额不能超过'+this.mostBackMoney+'元')
         return
      }
      var ids = [];
      var that = this
      this.jumpDataList.map((item) => {
        ids.push(item.id);
      });
      this.fileList.map((item) => {
        that.upLoadImg(item.file);
      });
      setTimeout(() => {
        apiRefundcreateRefundOrder({
        imageUrl:that.reqimageUrl.toString().slice(0, -1),
        orderDetailsIds: ids,
        orderId: Number(that.menuId),
        orderRemark: that.inputNotes,
        refundReason: that.reasonText,
        shopId: Number(that.shopId),
        totalRefundPrice: Number(that.inputMoney),
      }).then((res) => {
        if (res.code == 200) {
          that.$toast.success("申请成功，待审核");
          that.$router.push({
            path: "/pages/allOrderList",
            query: {
              //传递参数
            },
          });
        }
      });
      }, 500);
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
      console.log("result", this.result);
    },
  },
  created() {},
  components: {
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [Popup.name]: Popup,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
};
</script>

<style scoped>
.productionItem {
  width: calc(95% - 30px);
  margin: 0 auto;
  min-height: 110px;
  background: #ffffff;
  border-radius: 20px;
  padding: 5px 15px;
  margin-top: 15px;
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.proIntroLeft {
}
.proPoster {
  width: 25%;
  height: 75px;
  position: absolute;
}
.proIntroRight {
  width: 65%;
  margin-top: 10px;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  margin-top: 15px;
}
.timeLeft {
}
.saleRight {
  color: #ff5757;
  font-size: 15px;
}
.moneyLogo {
  font-size: 10px;
}
.submit {
  width: 90%;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 40px;
  left: 5%;
}
.textArea {
  width: 100%;
  margin: 20px auto;
  background: #f2f4fa;
  border-radius: 20px;
}
textarea {
  width: 87%;
  border: 1px solid #f2f4fa;
  height: 90px;
  border-radius: 20px;
  padding: 20px;
  background: #f2f4fa;
}
textarea::placeholder {
  font-size: 13px;
  font-weight: 300;
  color: #999999;
}
.submit2 {
  width: 90%;
  margin: 20px auto;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  /* position: fixed; */
  /* bottom: 40px;
  left: 5%; */
}
.infoList {
  overflow: hidden;
  /* width: calc(100% - 30px); */
  width: 100%;
  margin-top: 10px;
  /* background: #cc6262; */
  /* border-radius: 20px; */
  /* padding: 15px 15px 5px 15px; */
  /* margin-bottom: 20px; */
}
.left {
  float: left;
}
.lineWrap {
  overflow: hidden;
  margin-bottom: 15px;
  color: #010101;
  font-size: 14px;
}
.leftLine {
  float: left;
  font-weight: 500;
}
.rightLine {
  float: right;
  font-weight: 300;
}
.reason {
  font-size: 14px;
  font-weight: 300;
  color: #999999;
  line-height: 20px;
}
.rightArrow {
  /* float: right; */
  width: 5px;
  height: 8px;
}
.inputMoney {
  width: 65px;
  height: 27px;
  padding: 0px 15px;
  background: #f2f4fa;
  border-radius: 13px;
  border: 0px;
}
.inputMoney::placeholder {
  color: #999999;
  font-size: 12px;
}
.notes {
  font-size: 10px;
  font-weight: 300;
  color: #999999;
}
.reasonTitle .van-cell__value--alone {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.reasonBtn .van-cell__value--alone {
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff !important;
}
</style>
